iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
1
Modern Web

讓0基礎的你也能製作簡單wordpress主題系列 第 28

【Day28 】 Wordpress custom field ?是什麼來的?該怎麼用?也許您需要這篇文章的幫助

  • 分享至 

  • xImage
  •  

試想想,你現在正在為一間酒店,製作一個網站,您需要為這間酒店加入訂房的畫面。當然,床數量,有沒有浴缸,包不包括早餐,這些重要的資訊,是必須包括的吧。也許你第一時間會想到的,就是直接輸入到文章裏。但有沒有一些更方便,可以一鍵解決,不用每篇都重複輸入,並且簡單地進行分類呢?當然是有的,這就是一個大家在初學時會比較少用的功能:wordpress custom field。

基本卻不好用的custom field

當我們說起custom field ,大家基本上就會直接跳去講解怎樣使用plugin,來幫助你完美地做到custom field,但卻鮮有人提起,其實wordpress,也是有提供基本的custom field給你使用。只是,這不夠實用,也不夠方便罷了,為什麼這樣說?你看下去就知道了。

開啟custom field 功能

不過無論怎樣,我們還是要先把這功能開啟先吧,點選隨便一篇文章,點一下右上角的三點,選擇偏好設定,然後把最底的自訂欄位勾選,這樣就可以了。

這樣,之後我們可以在任何一篇文章,都能夠使用到這功能了。

custom field 基本設置

此時候,我們把文章頁面翻動到底部,會看到多了自訂欄位的,我們只要輸入自己想要的名稱和內容,那麼wordpress版面的部分,就已經設置完成了。不過,現在我們還不會看到它顯示在文章裏的。這可不是你做錯甚麼喔,這其實,就像之前的日期,選單等功能一樣,也是需要我們加入編碼,來作進一步的設定。

我們需要在post的php檔案裏,簡單加入以下編碼:

  <ul>
     <li>
       hi: <?php echo get_post_meta($post->ID, 'hi', true);?>
    </li>
   </ul>

hi: 其實就是你輸入的欄位名稱,若你的欄位名稱是其他,那麼只要輸入您的就可以了

get_post_meta : 還記得嗎,其實我們一直做的,就是讓系統到wordpress裏取資料,再讓想要的展示出來,而這次我們就需要用到get_post_meta,這樣就會根據你輸入的,來顯示出來

echo: 之前也看過的,假若你需要php顯示文字,就需要用到echo

true: 既然我們並沒有想設任何條件,讓這custom field 會在甚麼時候,顯示出來,我們只需要讓他在我們有加入內容時,就會出現,我們直接用true就可以了。

一個最大的問題

沒錯,現在一切看來,都是非常好的,沒甚麼問題呀,那麼究竟是什麼原因,讓大家不喜愛用?我們再回想一下製作酒店網頁這情景,你應該會意識到一件事,就是這些額外資料,不可能只會放在一個頁面裡,一個酒店網站可是有很多酒店呢,每個房都會需要加入這些額外資料,並且讓用家,可以利用這些資料,來作分類,篩選,搜尋。但當我們回到,wordpress裏,你會發現你剛設定好的內容,在其他文章裏,卻是不見了。很遺憾,若你是使用和啲皮ress預設的,你需要再重新再加入的。

當然你可以堅持地使用,這無疑是可行的,但你也無可否認,這樣會令你浪費了大量不必要的時間。更何況,他提供給您的custom field,是如此的簡陋和簡單,若你要弄一些複雜的功能,你也將會耗費更大量的時間,這也是為什麼,我在這裡會少有的推介大家,使用插件,簡化製作流程。

Advance custom field

說到有名氣的custom field插件,advance custom field 必定要算上一席位。即使為免費版本,亦提供豐富功能給用家使用在接下來的部分,就讓我就來基本介紹一下,它的用法吧。至於深入的部分,則將會在最後的篇章出現喔。在那篇,將會結合post-type來指導大家,讓你能夠更能善用advance custom field 這插件。

那我們就開始吧^^(注意喔,假若你先前有使用wordpress原設的custom field , 那麼請先移除,因為這plugin會把wordpress的,隱藏掉的。若你已經下載並啟動了,那麼則請先關閉這plugin,然後把先前設定好的移除,另外也可以把之前的編碼剷除掉)

基本設定

我們在wordpress的外掛裏,把advance custom field下載起來後,點擊新建。

進去後當然是先為我們的欄位定個名字先吧,完成後點擊新增欄位。

此時,會有一個新視窗出現,這裡有兩個非常重要的地方:

欄位標籤與名稱 - 這兩個看似很相似,卻還是有分別的。前者主要是給用家看的,而後這只是給系統讀取用的,至於要怎樣給系統讀取?你之後會看到的。這裡也有一個很貼心的地方,當你在標籤的地方裏輸入了之後,系統也會自動根據你定的標籤,來幫你起名稱的

欄位類型 - advance custom field 提供了多種欄位類型給你選擇,由文字到圖片以至google圖片都有提供的。不過我們暫時不動它,讓他先保留為預設的文字吧,或者我們可以專業一點,把他稱為字串(string)。沒錯,就是你們之前的php裏,有使用過的" "。

其他部份,例如說明,預設值,預留位置文字(placeholder),這些部分當然也是可以根據自己的情況而加入,但這些並不難去理解,我就不在這裡花費篇幅詳述了。

設定完成後,我們還有一個很重要的部分需要設定,就是下方的-位。

我們需要設定位置,來讓系統知道,這個custom field ,該在那邊出現的,例如你想要放在文章:page1,那麼就把設定設定為:文章等於文章1。假若你忘了設定,那麼即使儲存了,也不會出現在文章編輯頁面的下方。

這樣在wordpress裏的設定就大致上完成了,不過現在你應該還是甚麼也看不到。這和wordpress原設的custom field 也是有著相同的原理。我們需要回到php檔案裏,加入編碼。

基本編碼設定

打開檔案後,進入需要顯示這custom field 的檔案,例如我之前設定了需要顯示在文章的,那麼就到之前編寫文章內容的php檔案(postcontent)裡。

這裡有兩種常用的方法:the_field 與 get_field ,他們均是advance custom field 特有的編碼來,可以讓系統知道,你需要它顯示甚麼的。至於他們詳細的分別,我們一起看下去吧。

很像echo的the_field

the_field的功能和echo是一樣,都是讓系統直接把文字內容顯示出來。只是過程有點不一樣,他需要先經過插件,來看看你輸入了什麼,然後再顯示出來。

用法:

<?php the_field('post_type')?>

是不是覺得這個post_type有點眼熟呢?沒錯這個就是你先前在wordpress裏,由系統自動生成好好的欄位名稱來。

缺點:

雖然這樣做確實很方便,但若你希望它能夠按情況而出現,那麼這樣是沒辦法做到,這時候我們可以使用到它的另一個功能:get_field

get_field,為你的custom field加入稱號(變數variable)

還記得嗎?在php的世界裡,我們可以把一堆編碼設為一個稱號,例如:$txt = "Hello world!",這樣你之後要使用的話,只需要輸入它的稱號$txt,叫它的名字,它就會出現的了,例如:echo "$txt!"; 。而最終的結果,當然是會和你自己直接echo "Hello world!";,會是一樣的。

我們回到這裡,advance custom field 同樣讓也提供相同功能,不過我們不能使用the_field了,而是需要用到get_field。你要知道,我們現在是要經過advance custom field來做事的,那麼自然也是該要向插件說清楚,你現在不是要直接從advance custom field拿出內容,顯示出來,而是只需要讓系統知道,你現在只是要處理這個部份的custom field,而get_field就有這效果了。

基本用法:

<h2><?php 
$type = get_field('post_type');
echo $type?><h2>

<h2><?php 
get_field('post_type');
the_field('post_type'); ?></h2>

h1,h2這類顯示文字的html編碼,在這裡是必須加入的

在loop 裏的用法:

<?php if( get_field('post_type') ): ?>   <!--翻譯:如果post_type有內容可以拿出來的話 -->
    <h2><?php the_field('post_type'); ?></h2>
<?php endif; ?>

這樣子,就會令你的custom field,在有輸入內容的時候,才會在網頁裡顯示出來。

若想簡化一點,也可以像平常程式語言那樣,先在檔案裏的開頭,把稱號先寫好,到下方有需要的時候再使用:

<?php $type = get_field('post_type'); ?>  <!--放在編碼的頂部,若為主頁,則放在get_header下方  -->

 <?php if ($type): ?>
    <h2><?php echo $type; ?></h2>
 <?php endif; ?>

假若你按滑鼠右鍵,然後點選檢查,你會注意到雖然沒顯示在網頁裡,但編碼中是有你設定的h1,這代表成功

常用欄位類型介紹(前篇)

文字區域: 和文字相比,這可加入一整篇文章進去。不過注意,在原先設定中,是不會自動分隔段落的,可以透過在下方的選項-新行裡點選:自動增加段落,來解決這問題。

數字與範圍: 兩者都只可以加入數字,不過前者是固定一個數字的,而後者則需要提供數字會涵蓋的範圍,例如1-100這樣子。

圖片 : 這裡有兩點需要地方需要注意

第一,在wordpress內裡,只可以調整預覽圖的大小,若要調整圖片在顯示出來時的大小,可以像之前那樣,先在function裏,加入圖片大小的設定:

add_image_size('custom-field', 400, 200, false );

然後用下方的方法,讓你的custom-field圖片可以跟從你設定的大小:

$image = get_field('post_type'); <!-- 跟文字一樣,都先需要設定好稱號--> $picture = $image['sizes']['custom-field'];

最後,在你想加入的地方,加入編碼:

<img src="<?php echo $picture;?>" >

若只加入$ picture ,這只會顯示圖片的url(連結),所以也需要像文字那樣,加入html編碼。

第二,無論是alt 還是 title 還是 圖片內容,我們均需要加入編碼,指引系統,讓它們能夠正常顯示出來。我們先在頂部加入以下編碼:

$alt = $image['alt'];
$title = $image['title'];
$caption = $image['caption'];

接著在下方加入以下編碼。alt 和 title ,只需要像平常html那樣輸入就可以了:

<img src="<?php echo $picture;?>" alt="<?php echo $alt;?>" title="<?php echo $title;?>">

caption則可以用跟文字一樣的方法來加入:

<p class="wp-caption-text"><?php echo $caption; ?></p>

順帶一提,你也是可以像文字那樣,加入if,確保有使用的時候才會出現,但由於用法是一樣,這裡就不再說了。

檔案:情況跟圖片相近,無論是檔案url和檔案名稱,我們均需要加入編碼,來指引系統讓它們能正常顯示

上方

$file = get_field('post_type');
$url = $file['url'];
$name = $file['filename'];

下方

<a href="<?php echo $picture;?>"<?php echo $name;?>

可視化編輯器:我們常會在wordpress裏看到的文章編輯器

oEmbed :可以要來直接放置任何在社交媒體版面發送的貼文連結,或在串流媒體網站如youtube發放的影片連結。
這裡比較特別,不像其他,這是會直接顯示你所放的內容,所以不用加入html,只需要在直接顯示出來就可以,例如:

<?php echo get_field('embed');?>

選擇、複選框、單選按鈕、按鈕群組:

他們功能上的差別並不大,但值得注意的是除了複選框肯定了必須要複選,選擇可自由選擇是否複選外,其他都只可以單選。

內裡所有選項的格式,均需要為a:A這樣子,前方的a是選項的數值,後者的則是標籤,你可以在返回值一欄位裏,選擇自己需要怎樣讓電腦去提取選擇了的

若希望允許可以留空的話,可以在空值(null)裏,調整為『是』

使用方法參考:

<?php
$field = get_field_object('color');?>

<p> letter:<?php echo $field ; ?></p>                      

你會看到和之前的,差別並不大。

True與false,跟雙方的相近,只是這次的選項只剩下了對與否兩種選擇。

使用方法參考:

<?php
$field = get_field_object('color');?>

<?php
if( get_field('color') ) {
    。。。。。。。。。。。
}

上一篇
【day27】修改你wordpress主題,header裏的 head的部分,並教你剷除wp_head的不必要檔案
下一篇
【Day 29】Custom post type,讓你海量的文章也能分類起來
系列文
讓0基礎的你也能製作簡單wordpress主題30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言